import React, { PureComponent, Fragment } from 'react'
import { Wrapper, Content, Span } from './style.js'
import { actionCreater } from './store'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { Icon, BackTop } from 'antd'
class Wrap extends PureComponent{
 componentDidMount(){
     this.props.getWrapData()
 }
    render(){
        const { wrapData, loadMore, page }= this.props;
        return(
            <Fragment>
               

                {
                   wrapData.map((items, index) => {
                    return(
                        <Wrapper key= {index}>
                            <img alt= '' className= 'wrap-img' src= {items.get('urlImg')} />
                            <Content>
                                <div>
                                    <h4 className= 'c-title'>{items.get('title')}</h4>
                                    <Link to= '/'>
                                    <p className= 'description'>{items.get('description')}</p>
                                    </Link>
                                    
                                    <Link to= '/'>
                                    <span className= 'btn-success'><Icon  type="plus" theme="outlined" /><span className= 'btn'>关注</span></span>
                                    </Link>
                                </div>
                                <hr/>
                                <span className= 'meta'>最近更新</span>
                                <div>
                                    <Link className= 'new' to= '/'>{items.get('new1')} </Link>
                                    <Link className= 'new' to= '/'>{items.get('new2')} </Link>
                                    <Link className= 'new' to= '/'>{items.get('new3')} </Link>
                                </div>
                            </Content>
                        </Wrapper>
                    )
                   })
                }
                
                
                      <Span onClick={() => { loadMore( page ) } }>
                          加载更多
                      </Span>
                    <BackTop></BackTop>
             
           </Fragment>
        )
           
        
    }
}
const mapState = (state) => {
  return {
    wrapData: state.getIn(['wrap', 'wrapData']),
    page: state.getIn(['wrap', 'page'])

  }
}
const mapDispatch = (dispatch) => {
    return {
        getWrapData(){
            dispatch( actionCreater.getData())
        },
        loadMore(page){
            dispatch( actionCreater.getMore(page))
            
        }
    }
}
export default connect(mapState, mapDispatch)(Wrap)